<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.example.cdpbookstore.pojo.entity.Customer" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    Customer customer = (Customer) session.getAttribute("customer");
    if (customer == null) {
        response.sendRedirect("login.jsp");
    }
%>
<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布克书店 - 我的账户</title>

    <link rel="icon" type="image/png" href="image/web-icon.png">
    <link rel="stylesheet" type="text/css" href="lib/font-awesome-6.5.2/css/all.css">
    <link rel="stylesheet" type="text/css" href="css/common/com-a.css">
    <link rel="stylesheet" type="text/css" href="css/common/com-b.css">
    <link rel="stylesheet" type="text/css" href="css/user.css">
</head>

<body>
<div class="main">
    <jsp:include page="common/header1.jsp"/>

    <!-- user info 我的账户部分 -->
    <div class="userInfo">
        <div class="ui-center">
            <h1>设置</h1>
            <div class="uiWarp">
                <div class="ui-bar">
                    <div class="active" onclick="switchPanel(this)">收件人</div>
                    <div onclick="switchPanel(this)">头像</div>
                    <div onclick="switchPanel(this)">邮箱</div>
                    <div onclick="switchPanel(this)">密码</div>
                </div>
                <div class="ui-content">
                    <div id="ui-recipient" class="active panel">
                        <div class="row">
                            <label for="rec-name">姓名：</label>
                            <input type="text" name="rec-name" id="rec-name" value="${customer.name}">
                        </div>

                        <div class="row">
                            <label for="rec-mobile">电话：</label>
                            <input type="text" name="rec-mobile" id="rec-mobile" value="${customer.mobile}">
                        </div>

                        <div class="row">
                            <label for="rec-address">地址：</label>
                            <input type="text" name="rec-address" id="rec-address" value="${customer.address}">
                        </div>
                    </div>

                    <div id="ui-avatar" class="panel">
                        <div class="avatarWarp">
                            <c:if test="${customer == null || customer.avatar == null}">
                                <img class="avatar" src="image/avatar.png" alt="">
                            </c:if>
                            <c:if test="${!(customer == null || customer.avatar == null)}">
                                <img src="img/avatar/${customer.avatar}" alt="">
                            </c:if>
                        </div>
                        <div class="row">
                            <input type="file" name="ava-new" id="ava-new">
                        </div>
                    </div>

                    <div id="ui-email" class="panel">
                        <div class="row">
                            <label for="email-new">邮箱：</label>
                            <input type="text" name="email-new" id="email-new" value="${customer.email}" required>
                        </div>
                        <div class="row">
                            <label for="captcha">验证码：</label>
                            <input type="text" name="captcha" id="captcha">
                            <span id="getCaptcha" onclick="getCaptcha()">获取验证码</span>
                        </div>
                    </div>

                    <div id="ui-password" class="panel">
                        <div class="row">
                            <label for="pas-old">旧密码：</label>
                            <input type="password" name="pas-old" id="pas-old" required>
                        </div>

                        <div class="row">
                            <label for="pas-new">新密码：</label>
                            <input type="password" name="pas-new" id="pas-new" required>
                        </div>

                        <div class="row">
                            <label for="pas-confirm">确认密码：</label>
                            <input type="password" name="pas-confirm" id="pas-confirm" required>
                        </div>
                    </div>

                    <button class="btn" id="update">提交</button>
                </div>

            </div>

        </div>
    </div>

    <jsp:include page="common/footer1.jsp"/>
</div>
<script src="js/user.js"></script>
</body>

</html>